<template>
  <div style="padding: 20px">
    <el-card class="box-card">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="商品" prop="productId">
          <el-select
            style="width: 500px"
            v-model="form.productId"
            placeholder="请选择商品"
            class="filter-item"
            filterable
          >
            <el-option
              v-for="item in goodList"
              :value="item.id"
              :key="item.id"
              :label="item.storeName"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="上级电话" prop="phone">
          <el-input
            style="width: 500px"
            v-model="form.phone"
            placeholder="请输入上级电话"
          />
        </el-form-item> -->
        <el-form-item label="用户" prop="uid">
          <el-select
            style="width: 500px"
            v-model="form.uid"
            placeholder="请选择用户"
            class="filter-item"
            filterable
            @change="changeUser"
          >
            <el-option
              v-for="item in userList"
              :value="item.uid"
              :key="item.uid"
              :label="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级" prop="phone">
          <el-select
            style="width: 500px"
            v-model="form.phone"
            placeholder="请选择上级"
            class="filter-item"
            filterable
          >
            <el-option
              v-for="item in userList"
              :value="item.phone"
              :key="item.uid"
              :label="item.phone"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="totalNum">
          <el-input-number
            style="width: 500px"
            v-model="form.totalNum"
            :min="1"
            :max="1000"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
          <el-input
            style="width: 500px"
            v-model="form.realName"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item label="电话" prop="userPhone">
          <el-input
            style="width: 500px"
            v-model="form.userPhone"
            placeholder="请输入电话"
          />
        </el-form-item>
        <el-form-item label="地址" prop="userAddress">
          <el-input
            style="width: 500px"
            v-model="form.userAddress"
            placeholder="请输入地址"
          />
        </el-form-item>
        <el-form-item>
          <el-button style="width: 500px" type="primary" @click="submitForm"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { listStoreProduct } from "@/api/business/storeProduct";
import { listAllUser, addOrder, getParentPhoneApi } from "@/api/business/user";
export default {
  data() {
    return {
      userList: [],
      goodList: [],
      form: {
        productId: "",
        uid: "",
        totalNum: 1,
        realName: "",
        userPhone: "",
        userAddress: "",
        phone: "",
      },
      queryParams: {
        spreadUid: 0,
      },
      rules: {
        productId: [
          { required: true, message: "请选择商品", trigger: "change" },
        ],
        uid: [{ required: true, message: "请选择用户", trigger: "change" }],
        phone: [{ required: true, message: "请选择上级", trigger: "change" }],
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        userPhone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        totalNum: [
          { required: true, message: "请输入数量", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getGoods();
    this.getUsers();
  },
  methods: {
    getGoods() {
      listStoreProduct({ pageNum: 1, pageSize: 99 }).then((response) => {
        this.goodList = response.rows;
      });
    },
    getUsers() {
      listAllUser().then((response) => {
        this.userList = response.data;
      });
    },
    changeUser(val) {
      getParentPhoneApi(val).then((response) => {
        this.form.phone = response.msg;
      });
      console.log(val);
      const user = this.userList.find((item) => item.uid == val);
      console.log(user);
      this.form.userPhone = user.phone;
      this.form.realName = user.nickname;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addOrder(this.form).then(() => {
            this.$modal.msgSuccess("下单成功");
            this.form = {
              productId: "",
              uid: "",
              totalNum: 1,
              realName: "",
              userPhone: "",
              userAddress: "",
            };
            this.$refs["form"].resetFields();
          });
        }
      });
    },
  },
};
</script>
<style scoped></style>
